<template>
  <div class="app-table">
    <div class="app-body2">
      <div id="main1" style="width: 100%; height: 400px"></div>
      <div id="main" style="width: 100%; height: 800px;margin-top:40px"></div>
      <div id="main3" style="width: 100%; height: 360px;margin-top:40px"></div>
      <div id="main2" style="width: 100%; height: 300px"></div>

    </div>
  </div>

</template>
<script>
import { getCurrentInstance } from "vue";


let myChart;
let myChart1;
let myChart2;
let myChart3;
export default {
  name: "NoFound",

  setup() {
    const { proxy } = getCurrentInstance()
    const echarts = proxy.$echarts
    console.log(echarts)
    return {
      echarts
    }
  },
  components: { getCurrentInstance },
  mounted() {

    this.setChart()
    this.setChart1()
    this.setChart2()
    this.setChart3()

  },
  data() {
    return {
      // 指定图表的配置项和数据
      option: {
        title: {
          text: '柱状图分析'
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        legend: {},
        tooltip: {},
        dataset: {
          source: [
            ['product', '2012', '2013', '2014', '2015'],
            ['Matcha Latte', 41.1, 30.4, 65.1, 53.3],
            ['Milk Tea', 86.5, 92.1, 85.7, 83.1],
            ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4]
          ]
        },
        xAxis: [
          { type: 'category', gridIndex: 0 },
          { type: 'category', gridIndex: 1 }
        ],
        yAxis: [{ gridIndex: 0 }, { gridIndex: 1 }],
        grid: [{ bottom: '55%' }, { top: '55%' }],
        series: [
          // These series are in the first grid.
          { type: 'bar', seriesLayoutBy: 'row' },
          { type: 'bar', seriesLayoutBy: 'row' },
          { type: 'bar', seriesLayoutBy: 'row' },
          // These series are in the second grid.
          { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
          { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
          { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
          { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 }
        ]
      },
      option1: {
        title: {
          text: '折线图分析'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: 'Email',
            type: 'line',
            stack: 'Total',
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: 'Union Ads',
            type: 'line',
            stack: 'Total',
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: 'Video Ads',
            type: 'line',
            stack: 'Total',
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: 'Direct',
            type: 'line',
            stack: 'Total',
            data: [320, 332, 301, 334, 390, 330, 320]
          },
          {
            name: 'Search Engine',
            type: 'line',
            stack: 'Total',
            data: [820, 932, 901, 934, 1290, 1330, 1320]
          }
        ]
      },
      option2: {
        title: {
          text: '饼图分析'
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        dataset: [
          {
            source: [
              ['Product', 'Sales', 'Price', 'Year'],
              ['Cake', 123, 32, 2011],
              ['Cereal', 231, 14, 2011],
              ['Tofu', 235, 5, 2011],
              ['Dumpling', 341, 25, 2011],
              ['Biscuit', 122, 29, 2011],
              ['Cake', 143, 30, 2012],
              ['Cereal', 201, 19, 2012],
              ['Tofu', 255, 7, 2012],
              ['Dumpling', 241, 27, 2012],
              ['Biscuit', 102, 34, 2012],
              ['Cake', 153, 28, 2013],
              ['Cereal', 181, 21, 2013],
              ['Tofu', 395, 4, 2013],
              ['Dumpling', 281, 31, 2013],
              ['Biscuit', 92, 39, 2013],
              ['Cake', 223, 29, 2014],
              ['Cereal', 211, 17, 2014],
              ['Tofu', 345, 3, 2014],
              ['Dumpling', 211, 35, 2014],
              ['Biscuit', 72, 24, 2014]
            ]
          },
          {
            transform: {
              type: 'filter',
              config: { dimension: 'Year', value: 2011 }
            }
          },
          {
            transform: {
              type: 'filter',
              config: { dimension: 'Year', value: 2012 }
            }
          },
          {
            transform: {
              type: 'filter',
              config: { dimension: 'Year', value: 2013 }
            }
          }
        ],
        series: [
          {
            type: 'pie',
            radius: 80,
            center: ['20%', '80%'],
            datasetIndex: 1
          },
          {
            type: 'pie',
            radius: 80,
            center: ['20%', '80%'],
            datasetIndex: 2
          },
          {
            type: 'pie',
            radius: 80,
            center: ['20%', '80%'],
            datasetIndex: 3
          }
        ],
        // Optional. Only for responsive layout:
        media: [
          {
            query: { minAspectRatio: 1 },
            option: {
              series: [
                { center: ['25%', '50%'] },
                { center: ['50%', '50%'] },
                { center: ['75%', '50%'] }
              ]
            }
          },
          {
            option: {
              series: [
                { center: ['50%', '25%'] },
                { center: ['50%', '50%'] },
                { center: ['50%', '75%'] }
              ]
            }
          }
        ]
      },
      option3: {
        title: {
          text: '雷达图分析'
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          left: 'center',
          data: [
            'A Software',
            'A Phone',
            'Another Phone',
            'Precipitation',
            'Evaporation'
          ]
        },
        radar: [
          {
            indicator: [
              { text: 'Brand', max: 100 },
              { text: 'Content', max: 100 },
              { text: 'Usability', max: 100 },
              { text: 'Function', max: 100 }
            ],
            center: ['25%', '40%'],
            radius: 80
          },
          {
            indicator: [
              { text: 'Look', max: 100 },
              { text: 'Photo', max: 100 },
              { text: 'System', max: 100 },
              { text: 'Performance', max: 100 },
              { text: 'Screen', max: 100 }
            ],
            radius: 80,
            center: ['50%', '40%']
          },
          {
            indicator: (function () {
              var res = [];
              for (var i = 1; i <= 12; i++) {
                res.push({ text: i + '月', max: 100 });
              }
              return res;
            })(),
            center: ['75%', '40%'],
            radius: 80
          }
        ],
        series: [
          {
            type: 'radar',
            tooltip: {
              trigger: 'item'
            },
            areaStyle: {},
            data: [
              {
                value: [60, 73, 85, 40],
                name: 'A Software'
              }
            ]
          },
          {
            type: 'radar',
            radarIndex: 1,
            areaStyle: {},
            data: [
              {
                value: [85, 90, 90, 95, 95],
                name: 'A Phone'
              },
              {
                value: [95, 80, 95, 90, 93],
                name: 'Another Phone'
              }
            ]
          },
          {
            type: 'radar',
            radarIndex: 2,
            areaStyle: {},
            data: [
              {
                name: 'Precipitation',
                value: [
                  2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 75.6, 82.2, 48.7, 18.8, 6.0, 2.3
                ]
              },
              {
                name: 'Evaporation',
                value: [
                  2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 35.6, 62.2, 32.6, 20.0, 6.4, 3.3
                ]
              }
            ]
          }
        ]
      },
    }
  },
  methods: {
    setChart() {

      if (myChart != null && myChart != "" && myChart != undefined) {
        myChart.dispose();//销毁
      }
      myChart = this.echarts.default.init(document.getElementById('main'));

      myChart.setOption(this.option)
    },
    setChart1() {
      if (myChart1 != null && myChart1 != "" && myChart1 != undefined) {
        myChart1.dispose();//销毁
      }
      myChart1 = this.echarts.default.init(document.getElementById('main1'));

      myChart1.setOption(this.option1)
    },
    setChart2() {
      if (myChart2 != null && myChart2 != "" && myChart2 != undefined) {
        myChart2.dispose();//销毁
      }
      myChart2 = this.echarts.default.init(document.getElementById('main2'));

      myChart2.setOption(this.option2)
    },
    setChart3() {
      if (myChart3 != null && myChart3 != "" && myChart3 != undefined) {
        myChart3.dispose();//销毁
      }
      myChart3 = this.echarts.default.init(document.getElementById('main3'));

      myChart3.setOption(this.option3)
    },
  }
}
</script>
<style scoped>
.welcome {
  text-align: center;
  line-height: calc(100vh - 60px);
  font-size: 40px;
  color: #409EFF;
}

.app-body2 {
  background: white;
  padding: 20px 20px 10px 20px;
  margin: 10px;
}
</style>
